<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/bootstrap-theme.css">
</head>

<body>
  <br>
  <div id="app" class='container'>
    <!-- 表单 -->
    <div class="row">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">账号：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" v-model="form.username">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">姓名：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" v-model="form.name">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">密码：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" v-model="form.password">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">年龄：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" v-model="form.age">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">手机号：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" v-model="form.phone">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">邮箱：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" v-model="form.email">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">性别：</label>
          <div class="col-sm-10">
            <input type="radio" value="先生" v-model="form.sex">先生
            <input type="radio" value="女士" v-model="form.sex">女士
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">爱好：</label>
          <div class="col-sm-10">
            <input type="checkbox" value="看书" v-model="form.hobies">看书
            <input type="checkbox" value="写字" v-model="form.hobies">写字
            <input type="checkbox" value="做作业" v-model="form.hobies">做作业
          </div>
        </div>


        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <template v-if="uid == ''">
              <button type="button" @click="addUser" class="btn btn-success">添加用户</button>
            </template>
            <template v-else>
              <button type="button" @click="editUser(uid,index)" class="btn btn-primary">修改用户</button>
            </template>
          </div>
        </div>
      </form>
    </div>

    <!-- 用户列表 -->
    <div class="row">
      <table class="table">
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
          </tr>
        </thead>
        <tr v-for="(item,index) in users" :key="'users_'+item._id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>
            <a class="label label-success" @click="edit(index,item)">修改</a>
            <a class="label label-danger" @click="del(index,item._id)">删除</a>
          </td>
        </tr>
      </table>
    </div>


  </div>


  <script src="./js/vue.js"></script>
  <script src="./js/axios.js"></script>
  <script>
    axios.defaults.baseURL = 'http://localhost:8080/api'
    new Vue({
      el: '#app',
      data: {
        // 修改时，此值不为空
        index: 0,
        uid: '',
        // 用户列表
        users: [],
        // 添加用户数据源
        form: {
          username: '',
          password: '',
          name: '',
          age: 20,
          sex: '女士',
          hobies: [],
          phone: '',
          email: ''
        }
      },
      // 发起ajax请求
      async mounted() {
        let { data } = await axios.get('/users')
        this.users = data
      },
      methods: {
        async addUser() {

          // 非空
          let flag = Object.entries(this.form).some(([key, value]) => {
            if (Array.isArray(value)) {
              if (value.length == 0) {
                return true
              }
            }

            if (value == '') {
              return true
            }
            return false
          })


          if (!flag) {
            let { data } = await axios.post('/users', this.form)
            // 添加到数组的第1位
            // this.users.unshift(data)
            this.users = [data, ...this.users]

          }
        },
        async del(index, id) {
          let ret = await axios.delete(`/users/${id}`)
          this.users.splice(index, 1)
          console.log(ret)
        },
        edit(index, obj) {
          this.form = obj
          this.uid = obj._id
          this.index = index
        },
        async editUser(uid,index){
          this.users[index] = this.form
          let ret = await axios.put(`/users/${uid}`,this.form)
          console.log(ret)
        }
      }
    })
  </script>
</body>

</html>